import React, { useEffect, useRef } from 'react';
import $ from 'jquery'
import * as echarts from 'echarts';

const Bar = () => {
    const chartDom = useRef(null)
    let myChart
    useEffect(() => {
        // var chartDom = document.getElementById('test');
        myChart = echarts.init(chartDom.current);
        var option;

        var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';


        var updateFrequency = 2000;
        var dimension = 0;

        var countryColors = { "Australia": "#00008b", "Canada": "#f00", "China": "#ffde00", "Cuba": "#002a8f", "Finland": "#003580", "France": "#ed2939", "Germany": "#000", "Iceland": "#003897", "India": "#f93", "Japan": "#bc002d", "North Korea": "#024fa2", "South Korea": "#000", "New Zealand": "#00247d", "Norway": "#ef2b2d", "Poland": "#dc143c", "Russia": "#d52b1e", "Turkey": "#e30a17", "United Kingdom": "#00247d", "United States": "#b22234" };

        $.when(
            $.getJSON('https://cdn.jsdelivr.net/npm/emoji-flags@1.3.0/data.json'),
            $.getJSON(ROOT_PATH + '/data/asset/data/life-expectancy-table.json')
        ).done(function (res0, res1) {
            var flags = res0[0];
            var data = res1[0];
            var years = [];
            for (var i = 0; i < data.length; ++i) {
                if (years.length === 0 || years[years.length - 1] !== data[i][4]) {
                    years.push(data[i][4]);
                }
            }

            function getFlag(countryName) {
                if (!countryName) {
                    return '';
                }
                return (flags.find(function (item) {
                    return item.name === countryName;
                }) || {}).emoji;
            }
            var startIndex = 10;
            var startYear = years[startIndex];

            var option = {
                grid: {
                    top: 10,
                    bottom: 30,
                    left: 150,
                    right: 80
                },
                xAxis: {
                    max: 'dataMax',
                    label: {
                        formatter: function (n) {
                            return Math.round(n);
                        }
                    }
                },
                dataset: {
                    source: data.slice(1).filter(function (d) {
                        return d[4] === startYear;
                    })
                },
                yAxis: {
                    type: 'category',
                    inverse: true,
                    max: 10,
                    axisLabel: {
                        show: true,
                        textStyle: {
                            fontSize: 14
                        },
                        formatter: function (value) {
                            return value + '{flag|' + getFlag(value) + '}';
                        },
                        rich: {
                            flag: {
                                fontSize: 25,
                                padding: 5
                            }
                        }
                    },
                    animationDuration: 300,
                    animationDurationUpdate: 300
                },
                series: [{
                    realtimeSort: true,
                    seriesLayoutBy: 'column',
                    type: 'bar',
                    itemStyle: {
                        color: function (param) {
                            return countryColors[param.value[3]] || '#5470c6';
                        }
                    },
                    encode: {
                        x: dimension,
                        y: 3
                    },
                    label: {
                        show: true,
                        precision: 1,
                        position: 'right',
                        valueAnimation: true,
                        fontFamily: 'monospace'
                    }
                }],
                // Disable init animation.
                animationDuration: 0,
                animationDurationUpdate: updateFrequency,
                animationEasing: 'linear',
                animationEasingUpdate: 'linear',
                graphic: {
                    elements: [{
                        type: 'text',
                        right: 160,
                        bottom: 60,
                        style: {
                            text: startYear,
                            font: 'bolder 80px monospace',
                            fill: 'rgba(100, 100, 100, 0.25)'
                        },
                        z: 100
                    }]
                }
            };

            // console.log(option);
            myChart.setOption(option);

            for (var i = startIndex; i < years.length - 1; ++i) {
                (function (i) {
                    setTimeout(function () {
                        updateYear(years[i + 1]);
                    }, (i - startIndex) * updateFrequency);
                })(i);
            }

            function updateYear(year) {
                var source = data.slice(1).filter(function (d) {
                    return d[4] === year;
                });
                option.series[0].data = source;
                option.graphic.elements[0].style.text = year;
                myChart.setOption(option);
            }
        })


    }, []);

    useEffect(() => {

    })

    return (
        <div id='test' ref={chartDom} style={{ width: '100%', height: '100%' }}>

        </div>
    )
}

export default Bar









